package com.hippo.core.ui.components

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.OutlinedTextFieldDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.hippo.core.R
import com.hippo.core.ui.theme.ColorBorder
import com.hippo.core.ui.theme.ColorHint

@Composable
fun PasswordEdit(
    modifier: Modifier = Modifier,
    text: String,
    hint: String,
    onValueChange: (String) -> Unit,
    leftPainter: Painter? = null,
    isError: Boolean = false,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
) {

    var passwordVisible by remember { mutableStateOf(false) }

    OutlinedTextField(
        modifier = modifier.fillMaxWidth(),
        value = text,
        onValueChange = onValueChange,
        isError = isError,
        placeholder = {
            Text(
                text = hint,
                style = MaterialTheme.typography.bodyMedium,
                color = ColorHint,
                fontSize = 14.sp,
                overflow = TextOverflow.Ellipsis,
            )
        },
        leadingIcon = {
            if (leftPainter != null) {
                Image(
                    modifier = Modifier.size(16.dp),
                    painter = leftPainter, contentDescription = null
                )
            }
        },
        trailingIcon = {

            val image = if (passwordVisible)
                painterResource(id = R.mipmap.eye)
            else
                painterResource(id = R.mipmap.eye)

            IconButton(onClick = { passwordVisible = !passwordVisible }) {
                Icon(
                    modifier = Modifier.size(16.dp),
                    painter = image,
                    contentDescription = "Toggle Password Visibility"
                )
            }
        },
        singleLine = true,
        colors = OutlinedTextFieldDefaults.colors(
            focusedBorderColor = MaterialTheme.colorScheme.primary,
            unfocusedBorderColor = ColorBorder,
            errorBorderColor = Color.Red,
        ),
        keyboardOptions = KeyboardOptions.Default.copy(
            keyboardType = KeyboardType.Password
        ),
        keyboardActions = keyboardActions,
        visualTransformation = if (passwordVisible) VisualTransformation.None else PasswordVisualTransformation(),
    )
}


@Preview(showBackground = true)
@Composable
private fun InputEditPreview() {
    Box(
        modifier = Modifier.padding(20.dp)
    ) {
        InputEdit(
            leftPainter = painterResource(R.mipmap.mail),
            text = "dddssssssssssssssssssdddddddddddddddddddddddddddddddddddddddd",
            hint = "Search",
            onValueChange = {},
            rightPainter = painterResource(R.mipmap.eye),
            onRightClick = {}
        )
    }
}